@import "../imports/mixins";
@import "../imports/vars";

.jw-skin-roundster {
    @active-color: #f15173;
    @inactive-color: #8490a0;
    @hover-color: @active-color;

    @display-icon-color: rgba(255, 255, 255, 0.5);
    @display-icon-hover-color: rgb(255, 255, 255);
    @display-bkgd-color: @inactive-color;
    @display-bkgd-hover-color: @hover-color;

    @progress-color: @active-color;
    @buffer-color: #9c9a9d;
    @rail-color: #878fa2;
    @thumb-color: @progress-color;
    @controlbar-background: #dfe2e9;
    @cc-inactive: @rail-color;
    @cc-active: @active-color;

    @roundster-corners: 1em;

    @volume-background: #5c6373;

    @cue-size: .25em;
    @thumb-size: .9em;
    @def-rail-width: 0.75em;
    @slider-height: @rail-height;
    @rail-height: 0.4em;

    @controlbar-height: 2em;

    @nextup-position-bottom: @controlbar-height + 0.7em + 0.5em;
    @nextup-position-bottom-touch: (@controlbar-height * 1.5em) + 0.7em + 0.8em;
    @nextup-position-right: 2%;
    @nextup-border-radius: @roundster-corners / 2;
    @nextup-header-background: fade(@controlbar-background, 80%);
    @nextup-body-background: darken(@nextup-header-background, 20%);
    @nextup-body-text-color-overflow: darken(@controlbar-background, 20%);

    #namespace > .controlbar-height();
    #namespace > .basic-skin-styles(); // Using the above local variables
    #namespace > .touch-flag-skin-styles(); // Using the above local variables
    #namespace > .set-global-color-classes();

    .skin-element-padding();

    /* Controlbar styles */
    .inset-controlbar();
    .jw-controlbar {
        border-radius: @roundster-corners;
        padding: 0 @roundster-corners;
    }

    /* Playlist title */
    .jw-tooltip-title {
        border-bottom: 1px solid #747D92;
        background-color: @rail-color;
    }

    /* Rail/slider styles */
    .jw-rail,
    .jw-progress,
    .jw-buffer {
        border-radius: @roundster-corners;
    }

    .jw-slider-volume {
        border: 0;
    }

    .jw-knob {
        background-color: #fff;
        width: @thumb-size;
        height: @thumb-size;
        border-radius: 50%;
        box-shadow: 0px 1px 5px 1px rgba(134,142,163,1);
    }

    /* Timeline and horizontal volume slider */
    .jw-slider-horizontal {
        .jw-cue {
            .vertically-centered-rail-element(@rail-height, @cue-size);

            width: @cue-size;
            height: @cue-size;
            border-radius: 50%;
            background-color: #fff;
        }

        .jw-knob {
            .vertically-centered-rail-element(@rail-height, @thumb-size);
        }
    }

    /* Volume slider */
    .jw-slider-vertical {
        .jw-rail {
            background-color: #434853;
        }

        .jw-rail,
        .jw-progress {
            width: .4em;
        }

        .jw-knob {
            .horizontally-centered-rail-element(@def-rail-width, @thumb-size);
        }

        .jw-slider-container{
            width: @def-rail-width;
        }

    }

    /* For the overlay containers */
    .jw-time-tip,
    .jw-volume-tip,
    .jw-menu {
        border-radius: 0.25em;
    }

    /* Position of remaining overlay containers */
    .jw-volume-tip,
    .jw-menu {
        bottom: .3em;
    }

    /* For the dock, in the upper right corner */
    .jw-dock {
        .jw-dock-button {
            border-radius: 50%;
        }
        .jw-overlay {
            border-radius: 2.5em;
        }
    }

    .jw-skip {
        border-radius: @roundster-corners;
        padding: @roundster-corners/4 @roundster-corners;
    }
}
